<template>
	<view>
		<!-- https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/PcakwdZqBEaIa9fe862195df82e64f3ddb9427064190_1632728729135.png -->

		<view class="loginimg">
			<image
				src="https://pocket-dev.oss-cn-shenzhen.aliyuncs.com/upload/PcakwdZqBEaIa9fe862195df82e64f3ddb9427064190_1632728729135.png"
				mode=""></image>
		</view>

		<view class="wxlogincss">
			<u-button type="success" v-if="userInfophone == false" lang="zh_CN" @click="wxLogin"
				:custom-style="wxloginbtn" :ripple="true" shape="circle">
				微信登录</u-button>

			<u-button type="success" v-if="userInfophone == true" :custom-style="wxloginbtn" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber" :ripple="true" shape="circle">
				获取手机号码
			</u-button>


		</view>

		<view class="logbttn">
			<view class="logintext">
				<view class="check" @click.native="check = !check">
					<u-checkbox class="checkboxcss" v-model="check" shape="circle" active-color="#0A348B"
						@click.native="check = !check" style="width: 45rpx;"></u-checkbox>
				</view>
				<text @click="check = !check" class="click">
					登录即同意
				</text>
				<text @click="server">《口袋智家平台服务协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loginForWechat,
		getUserPhoneForWechat
	} from "../../api/login";
	import {
		wx_login,
		wx_getUserProfile
	} from "../../api/wxApi.js";
	export default {
		data() {
			return {
				code: '',
				wxloginbtn: {
					borderRadius: '12rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#FFFFFF',
					border: '2rpx solid #0A348B',
					background: '#0A348B',
					height: '90rpx',
					width: '95%',
				},
				check: false,
				userInfophone: false,
				deviceCode: '', //详情页来的
			};
		},
		async onLoad(options) {
			console.log(1);
			this.code = await wx_login();
			if (options.deviceCode) {
				this.deviceCode = options.deviceCode
			}
			console.log(options.deviceCode, '登录页参数')
		},
		methods: {
			async wxLogin() {
				if (!this.check) return this.$u.toast('请勾选协议');
				let _this = this;
				console.log(this.code);
				console.log(2);
				if (this.code) {
					wx_getUserProfile().then(res => {
						console.log(res);
						//发起网络请求
						console.log('登录！', this.code)
						let data = {
							code: this.code,
							rawData: res.rawData,
							signature: res.signature,
							wxUserInfoRequest: {
								iv: res.iv,
								encryptedData: res.encryptedData,
							}
						}
						console.log(data, '登录参数')
						loginForWechat(data).then(res3 => {
							console.log(res3, '登录接口请求')
							uni.setStorageSync('userInfo', res3.result);
							uni.setStorageSync('token', res3.result.token);
							console.log(_this.deviceCode, '登录页参数')
							if (res3.result.pdTenants.wxPhoneNumber == null ||
								res3.result.pdTenants.wxPhoneNumber == '') {
								_this.userInfophone = true
							} else if (_this.deviceCode) {
								uni.reLaunch({
									url: "/pages/Charging-pile/select-port?deviceCode=" +
										_this.deviceCode
								})
							} else {
								uni.reLaunch({
									url: "/pages/index/index"
								})
							}
						})
					})
				} else {
					this.code = await wx_login();
					console.log('登录失败！')
				}
			},
			//获取手机号码
			getPhoneNumber(e) {
				let _this = this;
				let date = {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
				}
				getUserPhoneForWechat(date).then(res => {
					console.log(res, '获取手机号码请求')
					// this.toLogin(res)
					uni.setStorageSync('userInfo', res.result);
					uni.setStorageSync('token', res.result.token);

					if (_this.deviceCode) {
						uni.reLaunch({
							url: "/pages/Charging-pile/select-port?deviceCode=" + _this.deviceCode
						})
					} else {
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}

				})

			},
		}
	}
</script>

<style lang="scss">
	::v-deep .u-checkbox.data-v-54acf820 {
		width: 45rpx;

	}

	.loginimg {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 110rpx 0;

		image {
			width: 540rpx;
			height: 540rpx;
		}
	}

	.wxlogincss {
		width: 100%;
		margin: 120rpx 0;
		margin-top: 220rpx;
	}

	.logbttn {
		position: fixed;
		bottom: 650rpx;
		width: 100%;
		height: 50rpx;
		text-align: center;
		color: #9DCBE8;
		font-weight: 400;
		font-size: 24rpx;

		.logintext {
			text-align: center;
			display: flex;
			height: 88rpx;
			justify-content: center;
			align-items: center;

			text:nth-child(2) {
				color: #666666;
			}

			text:nth-child(3) {
				color: #0A348B;
			}
		}

	}
</style>
